<template>
  <div>
    <el-form-item v-if="activeData.prepend !== undefined" label="前缀">
      <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
    </el-form-item>
    <el-form-item v-if="activeData.append !== undefined" label="后缀">
      <el-input v-model="activeData.append" placeholder="请输入后缀" />
    </el-form-item>
    <el-form-item v-if="activeData['prefix-icon'] !== undefined" label="前图标">
      <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
        <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')"> 选择 </el-button>
      </el-input>
    </el-form-item>
    <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
      <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
        <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')"> 选择 </el-button>
      </el-input>
    </el-form-item>
    <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
      <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
    </el-form-item>
    <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
      <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
    </el-form-item>
    <el-form-item v-if="activeData.minlength !== undefined" label="最少输入">
      <el-input v-model="activeData.minlength" placeholder="请输入字符长度">
        <template slot="append"> 个字符 </template>
      </el-input>
    </el-form-item>
    <el-form-item v-if="activeData.minlength !== undefined" label="最多输入">
      <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
        <template slot="append"> 个字符 </template>
      </el-input>
    </el-form-item>
    <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
      <span slot="label">
        输入统计
        <el-tooltip
          class="item"
          content="在设置最少、最多输入属性之后显示当前组件字数"
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData['show-word-limit']" />
    </el-form-item>
    <div v-if="activeData.config.dataType" class="reg-item">
      <el-form-item v-if="activeData.config.dataType" label="反馈类型">
        <el-select v-model="activeData.config.dataType.type" size="mini" @change="dataTypeChange">
          <el-option v-for="option in dataTypeList" :key="option.value" :value="option.value" :label="option.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="activeData.config.dataType.type" label="错误提示" style="margin-bottom: 0">
        <el-input v-model="activeData.config.dataType.message" placeholder="请输入错误提示" />
      </el-form-item>
    </div>
    <icons-dialog :current="activeData[currentIconModel]" :visible.sync="iconsVisible" @select="setIcon" />
  </div>
</template>

<script>
import IconsDialog from '../IconsDialog'

export default {
  name: 'ConfigItemInput',
  components: {
    IconsDialog
  },
  props: ['activeData'],
  data() {
    return {
      dataTypeList: [
        {
          value: null,
          label: '无校验'
        },
        {
          value: 'string',
          label: '字符串'
        },
        {
          value: 'number',
          label: '数字'
        },
        {
          value: 'integer',
          label: '整数'
        },
        {
          value: 'float',
          label: '小数'
        },
        {
          value: 'url',
          label: 'URL地址'
        },
        {
          value: 'email',
          label: '邮箱地址'
        },
        {
          value: 'phone',
          label: '手机号'
        },
        {
          value: 'identity',
          label: '身份证号'
        },
        {
          value: 'hex',
          label: '十六进制'
        }
      ],
      iconsVisible: false,
      currentIconModel: null
    }
  },
  methods: {
    dataTypeChange(value) {
      this.activeData.config.dataType.message = `请输入正确的${
        this.dataTypeList.find((item) => item.value === value).label
      }`
    },
    openIconsDialog(model) {
      this.iconsVisible = true
      this.currentIconModel = model
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val
    }
  }
}
</script>

<style scoped></style>
